<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/inc/taglib.jsp"%>
<%@ include file="/WEB-INF/jsp/inc/sessions.jsp"%>
<!DOCTYPE html>
<html class="no-js">
<head>
<%@ include file="/WEB-INF/jsp/inc/head.jsp"%>
<title>${appTitle}</title>
<link rel="stylesheet" type="text/css" href="${appRoot}/static/css/sweetalert.css">
</head>

<body>
	<div class="container">

		<header class="home-head">
			<em class="search"> <input type="text" placeholder="请输入菜品名称..."
				alt="5号食堂-牛肉拉面" name="mobile">
			</em>
		</header>


		<nav class="nav">
			<ul>
				<a href="index.html" class="act">
					<li>菜单</li>
				</a>
				<a href="canteen-comment.html">
					<li>评价</li>
				</a>
				<a href="canteen.html">
					<li>简介</li>
				</a>
			</ul>
		</nav>

		<div id="notice" class="notice">食堂营业时间是06：00——18：00</div>

		<p class="blank-index"></p>

		<section class="menu">
			<aside class="menu-left">
				<ul>
					<li class="act" data-id="0">湘菜系列<i>0</i></li>
					<li data-id="1">西餐系列<i>0</i></li>
					<li data-id="2">粤菜系列<i>0</i></li>
					<li data-id="3">满汉全席<i>0</i></li>
					<li data-id="4">糖醋鱼<i>0</i></li>
					<li data-id="5">太极白玉翡翠羹<i>0</i></li>
					<li data-id="6">淮扬狮子头<i>0</i></li>
					<li data-id="7">粤菜系列<i>0</i></li>
					<li data-id="8">盐水鸭<i>0</i></li>
					<li data-id="9">冷饮糕点<i>0</i></li>
					<li data-id="10">糖醋鱼<i>0</i></li>
					<li data-id="11">粤菜系列<i>0</i></li>
					<li data-id="12">粤菜系列<i>0</i></li>
					<li data-id="13">满汉全席<i>0</i></li>
				</ul>
			</aside>

			<div class="menu-right">

				<ul data-ul="0">
					<li class="menu-list" data-dish="darp0">
						<div class="list-left">
							<h1>11111肚面面羊肚面羊肚面</h1>
							<p>
								月售:<i>1222</i>份
							</p>
							<h2>
								￥<span>26.00</span>
							</h2>
						</div>
						<div class="list-right">
							<p class="list-img">
								<img class="img-details" src="${appRoot}/static/img/img1.jpg">
							</p>
							<div class="list-num">
								<i class="dell"><img src="${appRoot}/static/img/dell.png"></i>
								<span class="number">0</span> <i class="add"><img
									src="${appRoot}/static/img/add.png"></i>
							</div>
						</div>
					</li>

					<li class="menu-list" data-dish="darp1">
						<div class="list-left">
							<h1>fsadfasfasdfs</h1>
							<p>
								月售:<i>1222</i>份
							</p>
							<h2>
								￥<span>38.00</span>
							</h2>
						</div>
						<div class="list-right">
							<p class="list-img">
								<img class="img-details" src="${appRoot}/static/img/img1.jpg">
							</p>
							<div class="list-num">
								<i class="dell"><img src="${appRoot}/static/img/dell.png"></i>
								<span class="number">0</span> <i class="add"><img
									src="${appRoot}/static/img/add.png"></i>
							</div>
						</div>
					</li>

					<li class="menu-list" data-dish="darp2">
						<div class="list-left">
							<h1>fsadfasfasdfs</h1>
							<p>
								月售:<i>1222</i>份
							</p>
							<h2>
								￥<span>38.00</span>
							</h2>
						</div>
						<div class="list-right">
							<p class="list-img">
								<img class="img-details" src="${appRoot}/static/img/img1.jpg">
							</p>
							<div class="list-num">
								<i class="dell"><img src="${appRoot}/static/img/dell.png"></i>
								<span class="number">0</span> <i class="add"><img
									src="${appRoot}/static/img/add.png"></i>
							</div>
						</div>
					</li>

					<li class="menu-list" data-dish="darp3">
						<div class="list-left">
							<h1>fsadfasfasdfs</h1>
							<p>
								月售:<i>1222</i>份
							</p>
							<h2>
								￥<span>38.00</span>
							</h2>
						</div>
						<div class="list-right">
							<p class="list-img">
								<img class="img-details" src="${appRoot}/static/img/img1.jpg">
							</p>
							<div class="list-num">
								<i class="dell"><img src="${appRoot}/static/img/dell.png"></i>
								<span class="number">0</span> <i class="add"><img
									src="${appRoot}/static/img/add.png"></i>
							</div>
						</div>
					</li>

					<li class="menu-list" data-dish="darp4">
						<div class="list-left">
							<h1>fsadfasfasdfs</h1>
							<p>
								月售:<i>1222</i>份
							</p>
							<h2>
								￥<span>38.00</span>
							</h2>
						</div>
						<div class="list-right">
							<p class="list-img">
								<img class="img-details" src="${appRoot}/static/img/img1.jpg">
							</p>
							<div class="list-num">
								<i class="dell"><img src="${appRoot}/static/img/dell.png"></i>
								<span class="number">0</span> <i class="add"><img
									src="${appRoot}/static/img/add.png"></i>
							</div>
						</div>
					</li>
				</ul>

				<ul data-ul="1">
					<li class="menu-list" data-dish="darp5">
						<div class="list-left">
							<h1>fsadfasfasdfs</h1>
							<p>
								月售:<i>1222</i>份
							</p>
							<h2>
								￥<span>38.00</span>
							</h2>
						</div>
						<div class="list-right">
							<p class="list-img">
								<img class="img-details" src="${appRoot}/static/img/img1.jpg">
							</p>
							<div class="list-num">
								<i class="dell"><img src="${appRoot}/static/img/dell.png"></i>
								<span class="number">0</span> <i class="add"><img
									src="${appRoot}/static/img/add.png"></i>
							</div>
						</div>
					</li>

					<li class="menu-list" data-dish="darp6">
						<div class="list-left">
							<h1>fsadfasfasdfs</h1>
							<p>
								月售:<i>1222</i>份
							</p>
							<h2>
								￥<span>38.00</span>
							</h2>
						</div>
						<div class="list-right">
							<p class="list-img">
								<img class="img-details" src="${appRoot}/static/img/img1.jpg">
							</p>
							<div class="list-num">
								<i class="dell"><img src="${appRoot}/static/img/dell.png"></i>
								<span class="number">0</span> <i class="add"><img
									src="${appRoot}/static/img/add.png"></i>
							</div>
						</div>
					</li>
				</ul>

				<ul data-ul="2">
					<li class="menu-list">
						<div class="list-left">
							<h1>333肚面面羊肚面羊肚面</h1>
							<p>
								月售:<i>1222</i>份
							</p>
							<h2>￥26.00</h2>
						</div>
						<div class="list-right">
							<p>
								<img src="${appRoot}/static/img/img6.jpg">
							</p>
						</div>
					</li>

					<li class="menu-list act">
						<div class="list-left">
							<h1>333肚面面羊肚面羊肚面</h1>
							<p>
								月售:<i>1222</i>份
							</p>
							<h2>￥26.00</h2>
						</div>
						<div class="list-right">
							<p>
								<img src="${appRoot}/static/img/img6.jpg">
							</p>
						</div>
					</li>
				</ul>

				<ul data-ul="3">
					<li class="menu-list">
						<div class="list-left">
							<h1>333肚面面羊肚面羊肚面</h1>
							<p>
								月售:<i>1222</i>份
							</p>
							<h2>￥26.00</h2>
						</div>
						<div class="list-right">
							<p>
								<img src="${appRoot}/static/img/img6.jpg">
							</p>
						</div>
					</li>
				</ul>

				<ul>
					<li class="menu-list">
						<div class="list-left">
							<h1>333肚面面羊肚面羊肚面</h1>
							<p>
								月售:<i>1222</i>份
							</p>
							<h2>￥26.00</h2>
						</div>
						<div class="list-right">
							<p>
								<img src="${appRoot}/static/img/img6.jpg">
							</p>
						</div>
					</li>
				</ul>

				<ul>
					<li class="menu-list">
						<div class="list-left">
							<h1>333肚面面羊肚面羊肚面</h1>
							<p>
								月售:<i>1222</i>份
							</p>
							<h2>￥26.00</h2>
						</div>
						<div class="list-right">
							<p>
								<img src="${appRoot}/static/img/img6.jpg">
							</p>
						</div>
					</li>
				</ul>

				<ul>
					<li class="menu-list">
						<div class="list-left">
							<h1>333肚面面羊肚面羊肚面</h1>
							<p>
								月售:<i>1222</i>份
							</p>
							<h2>￥26.00</h2>
						</div>
						<div class="list-right">
							<p>
								<img src="${appRoot}/static/img/img6.jpg">
							</p>
						</div>
					</li>
				</ul>


				<ul>
					<li class="menu-list">
						<div class="list-left">
							<h1>333肚面面羊肚面羊肚面</h1>
							<p>
								月售:<i>1222</i>份
							</p>
							<h2>￥26.00</h2>
						</div>
						<div class="list-right">
							<p>
								<img src="${appRoot}/static/img/img6.jpg">
							</p>
						</div>
					</li>
				</ul>

				<ul>
					<li class="menu-list">
						<div class="list-left">
							<h1>333肚面面羊肚面羊肚面</h1>
							<p>
								月售:<i>1222</i>份
							</p>
							<h2>￥26.00</h2>
						</div>
						<div class="list-right">
							<p>
								<img src="${appRoot}/static/img/img6.jpg">
							</p>
						</div>
					</li>
				</ul>

			</div>
		</section>

		<footer>
			<div class="index-bottom">
				<div class="index-bottom-left">
					<img id="back" src="${appRoot}/static/img/back.png">
				</div>
				<div class="index-bottom-center">
					<span> <img id="icon-shop"
						src="${appRoot}/static/img/icon-shop.png"> <i
						class="shop-num" id="shop-num"> 1 </i>
					</span> <i>￥<span>00</span></i>
				</div>
				<div id="next-step" class="index-bottom-right">
					<a href="javascript:void(0);">下一步</a>
				</div>
			</div>
		</footer>


		<!--菜单图片详情页 弹出层 开始 -->
		<section class="mark" id="mark">
			<div class="mark-text">
				<span class="close" id="close">×</span> <img
					src="${appRoot}/static/img/img1.jpg">
				<div class="mark-left">
					<p class="title"></p>
					<p class="sale">
						月售:<i></i>份
					</p>
					<p class="price">
						￥<span></span>
					</p>
				</div>
				<div class="mark-right">
					<i class="dell"><img src="${appRoot}/static/img/dell.png"></i>
					<span class="number">1</span> <i class="add"><img
						src="${appRoot}/static/img/add.png"></i>
				</div>
			</div>
		</section>
		<!--菜单图片详情页 弹出层 结束 -->


		<!--系统通知 详情页面弹出层 开始 -->
		<section class="mark" id="notice-details">
			<ul class="notice-details">
				<span class="close" id="notice-close">×</span>
				食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营0——18：00食营0——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食营0——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食营0——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食营0——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营时间是06：00——18：00食堂营业时间是06：00——18：00
			</ul>
		</section>
		</section>
		<!--系统通知 详情页面弹出层 end  -->



		<!-- 点击下一步 购物车没有订单 弹出层 开始 -->
		<section class="mark" id="prompt">
			<ul class="prompt">
				<p class="word1">提示</p>
				<p class="word2">购物篮没有菜品喔，请先选些菜吧！</p>
				<p id="ensure" class="word3">确定</p>
				<ul>
		</section>
		<!-- 点击下一步 购物车没有订单 弹出层 结束 -->


		<!--点击购物车结算 弹出遮罩层 开始-->
		<section id="shop-mark" class="shop-mark">
			<div class="shop-mask"></div>
			<ul class="shop-cart">
				<p>
					<span>购物车</span> <i><a class="clearcart">清空全部</a></i>
				</p>
				<br>
				<br>
				<br>

			</ul>
		</section>
		<!--点击购物车结算 弹出遮罩层 end-->
	</div>
	
	<form action="${appRoot}/takeout/orderStep2" method="post" id="orderForm" name="orderForm"></form>
	
	<script src="${appRoot}/static/js/takeout/order.js"></script>
	<script src="${appRoot}/static/js/sweetalert.min.js"></script>
</body>
</html>